<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../../js/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/footer.css" />
		<link rel="stylesheet" type="text/css" href="../kaoqin.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/swiper-3.4.2.min.css" />
		<script src="../../../js/flexible.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#content {
				padding-top: 1.3rem;
			}
			
			body {
				background-color: #F5F5F5;
			}
			/*样式*/
			
			#qingjia {
				display: block;
				height: 20px;
				font-size: 12px;
				position: absolute;
				right: 0.333333rem;
				top: 0.3rem;
				padding: 0.069444rem;
				border: 1px solid #E93440;
				border-radius: 0.555555rem;
				color: #E93440;
				margin: 0;
			}
			
			#qingjia:active {
				color: white;
				background-color: #E93440;
			}
			
			.dkrl_top {
				height: 1.111111rem;
				padding: 0 0.388888rem;
				border-bottom: 1px solid #DBDBDB;
			}
			
			.dkrl_top span {
				line-height: 1.111111rem;
				float: left;
				font-weight: 600;
				font-size: 0.277777rem;
			}
			
			.dkrl_top label {
				line-height: 1.111111rem;
				float: right;
				font-weight: 600;
				font-size: 0.222222rem;
			}
			
			.shang {
				width: 0.7rem;
				float: left;
				padding-top: 2rem;
			}
			
			.xia {
				width: 0.7rem;
				float: left;
				padding-top: 2rem;
			}
			
			.shang img,
			.xia img {
				width: 100%;
			}
			
			.dkrl_middle {
				padding: 0;
				height: 6.25rem;
				width: 8.25rem;
				float: left;
			}
			
			.dkrl_middle table {
				padding: 0.555555rem;
				width: 100%;
				height: 100%;
				border-bottom: 1px solid #DBDBDB;
				padding-top: 0.291666rem;
				text-align: center;
			}
			
			.dkrl_middle table tbody {
				width: 100%;
			}
			
			.dkrl_middle table tbody tr {
				width: 100%;
				clear: both;
				margin-top: 0.291666rem;
			}
			
			.dkrl_middle table tbody tr th {
				width: 1.305555rem;
				text-align: center;
				color: #b5c5f1;
			}
			
			.dkrl_middle table tbody tr th:first-child,
			.dkrl_middle table tbody tr th:last-child {
				color: #FAA19E;
			}
			
			.dkrl_middle table tbody tr td:first-child,
			.dkrl_middle table tbody tr td:last-child {
				color: #FE0100;
			}
			
			.today span {
				display: inline-block;
				width: 0.5rem;
				height: 0.5rem;
				border-radius: 0.5rem;
				background-color: #488ff9;
				/*position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -0.25rem;
				margin-top: -0.25rem;*/
			}
			
			.rili_active span {
				display: inline-block;
				width: 0.5rem;
				height: 0.5rem;
				border-radius: 0.5rem;
				background-color: #dfebfb;
			}
			
			.kqdk_btn {
				width: 100%;
				height: 1.361111rem;
				position: fixed;
				bottom: 0;
				margin: 0;
			}
			
			.kqdk_btn li {
				width: 50%;
				float: left;
				height: 1.361111rem;
				border-top: 1px solid #DBDBDB;
			}
			
			.kqdk_btn li a {
				display: block;
				height: 1.361111rem;
				line-height: 1.361111rem;
				font-size: 0.416666rem;
				width: 100%;
				text-align: center;
			}
			
			.kqdk_btn li:nth-child(1) a {
				color: #E93440;
				background-color: white;
			}
			
			.kqdk_btn li:nth-child(2) a {
				color: white;
				background-color: #E93440;
			}
			
			.shangban,
			.xiaban {
				display: none;
				clear: both;
				padding:0.388888rem;
				background: #ececec;
    			margin: 0.3rem;
			}
			.shangban li,
			.xiaban li {
				font-size: 0.416666rem;
			}
		</style>
	</head>

	<body>
		<div id="wrap">
			<div id="main">
				<div id="header">
					<a id="headImg" href="../index.html"><img class="headImg" src="../../../images/12.png" /></a>
					<p id="headTitle" style="font-size: 16px;">考勤打卡</p>
					<a id="qingjia" href="../qjwc/qjwc.html">请假外出</a>
				</div>
				<div id="content">
					<div class="dkrl_top">
						<span>我的考勤</span>
						<label id="time">2017年1月1日星期五</label>
					</div>
					<div class="shang">
						<img src="../image/left.png" />
					</div>
					<div class="dkrl_middle">
						<!--<table border="" cellspacing="" cellpadding="">
							<thead>

							</thead>
							<tbody>

							</tbody>
						</table>-->
					</div>
					<div class="xia">
						<img src="../image/right2.png" />
					</div>
					<ul class="shangban">
						<h5><b>上班打卡</b></h5>
						<li><b>时间：</b>09:00</li>
						<li><b>wifi：</b>zhangshaoye</li>
						<li><b>位置：</b>长春市市南四环金融服务中心2-401</li>
					</ul>
					<ul class="xiaban">
						<h5><b>上班打卡</b></h5>
						<li><b>时间：</b>17:30</li>
						<li><b>wifi：</b>zhangshaoye</li>
						<li><b>位置：</b>长春市市南四环金融服务中心2-401</li>
					</ul>
					<ul class="kqdk_btn">
						<li>
							<a href="kqdk.html">考勤打卡</a>
						</li>
						<li>
							<a href="dkrl.html">打卡日历</a>
						</li>
					</ul>

				</div>
			</div>
		</div>

	</body>
	<script src="../../../js/jquery-2.2.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/handlebars-v2.0.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/rhAdmin.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function() {
			//判断当前年份是否是闰年(闰年2月份有29天，平年2月份只有28天)
			function isLeap(year) {
				return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
			}
			var i, k,
				today = new Date(), //获取当前日期
				y = today.getFullYear(), //获取日期中的年份
				m = today.getMonth(), //获取日期中的月份(需要注意的是：月份是从0开始计算，获取的值比正常月份的值少1)
				d = today.getDate(); //获取日期中的日(方便在建立日期表格时高亮显示当天)
			function yueli(year, month, day) {
				var firstday = new Date(year, month, 1), //获取当月的第一天
					dayOfWeek = firstday.getDay(), //判断第一天是星期几(返回[0-6]中的一个，0代表星期天，1代表星期一，以此类推)
					days_per_month = new Array(31, 28 + isLeap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31), //创建月份数组
					str_nums = Math.ceil((dayOfWeek + days_per_month[month]) / 7); //确定日期表格所需的行数

				var zhou = new Date(year, month, day).getDay();
				var x;
				switch(zhou) {
					case 0:
						x = "日";
						break;
					case 1:
						x = "一";
						break;
					case 2:
						x = "二";
						break;
					case 3:
						x = "三";
						break;
					case 4:
						x = "四";
						break;
					case 5:
						x = "五";
						break;
					case 6:
						x = "六";
						break;
				}
				$('#time').html(year + '年' + (month + 1) + '月' + day + '日' + ' 星期' + x);
				//声明接收日历的变量
				var rili = "";
				rili += "<table cellspacing='0'><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>"; //打印表格第一行(显示星期)
				for(i = 0; i < str_nums; i += 1) { //二维数组创建日期表格
					rili += '<tr>';
					for(k = 0; k < 7; k++) {
						var idx = 7 * i + k; //为每个表格创建索引,从0开始
						var date = idx - dayOfWeek + 1; //将当月的1号与星期进行匹配
						(date <= 0 || date > days_per_month[m]) ? date = '&nbsp;': date = idx - dayOfWeek + 1; //索引小于等于0或者大于月份最大值就用空表格代替
						date == day ? rili += '<td class="today"><span>' + date + '</span></td>' : rili += '<td><span>' + date + '</span></td>'; //高亮显示当天
					}
					rili += '</tr>';
				}
				rili += '</table>';
				$('.dkrl_middle').html(rili);
			}
			yueli(y, m, d);
			riqi();
			var m2 = m,
				y2 = y,
				d2 = d;
			//			console.log(new Date(2017,10,4).getDay());
			$('.shang img').on('touchend', function() {
				console.log(m);
				$('table tr td').removeClass("rili_active");
				if(m > 0) {
					//					alert(123);
					d = 1;
					m--;
					yueli(y, m, d);
					riqi();
				} else {
					//					alert(456);
					d = 1;
					m = 11;
					y--;
					yueli(y, m, d);
					riqi();
					alert(m);
				}
			})
			$('.xia img').on('touchend', function() {
				console.log(m);
				if(y < y2 && m < 11) {
					m++;
					d = 1;
					yueli(y, m, d);
					riqi();
					return;
				}
				if(y < y2 && m == 11) {
					y++;
					m = 0;
					d = 1;
					yueli(y, m, d);
					riqi();
					return;
				}
				if(y == y2 && m < m2 - 1) {
					m++;
					d = 1;
					yueli(y, m, d);
					riqi();
					return;
				}
				if(y == y2 && m == m2 - 1) {
					m++;
					d = d2;
					yueli(y, m, d);
					riqi();
					return;
				}
				//				if()
			})

			function riqi() {
				$('.dkrl_middle table tbody tr td').on('touchend', function() {
					console.log($(this).children().html());
					if($(this).children().html()!="&nbsp;") {
						var zhou2 = new Date(y, m, $(this).children().html()).getDay();
						var x2;
						switch(zhou2) {
							case 0:
								x2 = "日";
								break;
							case 1:
								x2 = "一";
								break;
							case 2:
								x2 = "二";
								break;
							case 3:
								x2 = "三";
								break;
							case 4:
								x2 = "四";
								break;
							case 5:
								x2 = "五";
								break;
							case 6:
								x2 = "六";
								break;
						}
						$('#time').html(y + '年' + (m + 1) + '月' + $(this).children().html() + '日' + ' 星期' + x2);
						$('table tr td').removeClass("rili_active");
						$(this).addClass("rili_active");
						$('.shangban').show();
						$('.xiaban').show();
					}

				})
			}

		})
	</script>

</html>